<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="360-site-verification" content="ed795688ce80828a0dd8f5ad9c05e4b1" />
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/base.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/style1.css" rel="stylesheet" type="text/css"/>
    <link href="css/user_style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="layer/layer.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <title>个人中心</title>
    <style>
        img {
            max-width: none;
        }

        .tb-pic a {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .tb-pic a img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
        }

        .tb-pic a {
            *display: block;
            *font-family: Arial;
            *line-height: 1;
        }

        .tb-thumb {
            margin: 10px 0 0;
            overflow: hidden;
        }

        .tb-thumb li {
            float: left;
            width: 86px;
            height: 86px;
            overflow: hidden;
            border: 1px solid #cdcdcd;
            margin-right: 5px;
        }

        .tb-thumb li:hover, .tb-thumb .tb-selected {
            width: 84px;
            height: 84px;
            border: 2px solid #3A7ACD;
        }

        .tb-s310, .tb-s310 a {
            height: 365px;
            width: 365px;
        }

        .tb-s310, .tb-s310 img {
            max-height: 365px;
            max-width: 365px;
        }

        .tb-booth {
            border: 1px solid #CDCDCD;
            position: relative;
            z-index: 1;
        }

        div.zoomDiv {
            z-index: 999;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffffff;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }

        div.zoomMask {
            position: absolute;
            background: url("images/mask.png") repeat;
            cursor: move;
            z-index: 1;
        }

        /*弹出隐藏层*/
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 1200px;
            background-color: black;
            z-index: 9999;
            -moz-opacity: 0.4;
            opacity: 0.40;
            filter: alpha(opacity=40);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 20%;
            left: 25%;
            width: 800px;
            height: 400px;
            border: none;
            background-color: white;
            z-index: 100200;
            overflow: auto;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .dialogbox {
            padding: 20px;
            line-height: 40px;
        }

        .addbtn {
            width: 22px;
            height: 22px;
            background: url(images/close2.png) no-repeat;
            margin-right: 5px;
            margin-top: 3px;
            border: none;
            float: right;
        }
        .rules p{
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="headerpage"></div>
    <!--用户中心样式-->
    <div class="user_style clearfix">
        <div class="user_center clearfix">
            <div class="left_style">
                <div class="menu_style">
                    <div class="user_title"><a href="user.html">个人中心</a></div>
                    <div class="user_Head">
                        <div class="user_portrait">
                            <a href="#" title="" class="btn_link"></a> <img src="images/logo.jpg">
                            <div class="background_img"></div>
                        </div>
                        <div class="user_name">
                            <p><span class="name" id="userName">{{account.name}}</span><a href="#"></a></p>
                            <!--<p>专属业务经理电话:15811111111</p>-->
                        </div>
                    </div>
                    <div class="sideMen">
                        <!--菜单列表图层-->
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_3"></em>服务管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="javascript:void (0)">我购买的</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_4"></em>钢厂管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="javascript:void (0)">我关注的</a></li>
                                    <li><a href="javascript:void (0)">我收藏的</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_1"></em>竞价管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="javascript:void (0)">我的场次</a></li>
                                    <li><a href="javascript:void (0)">浏览历史</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_1"></em>登陆管理</dt>
                            <dd>
                                <ul>
                                    <li @click="logout"><a href="javascript:void(0)">退出登录</a></li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                </div>


            </div>
            <div class="right_style">
                <div class="info_content" style="display:block;">
                    <div class="Notice"><span>系统最新公告:</span>国庆期间无法提现看货,请提现联系客服....</div>
                    <div class="user_info" v-cloak>
                        <ul class="">
                            <li class="Balance"><a href="#"><img src="images/user_img_05.png"/>
                                <h4>账户余额：￥{{account.balance}}</h4>
                                <h6>锁定保证金：￥{{account.sfrozenBalance}}</h6>
                                <h6>可转出金额：￥{{account.turnBalance}}</h6>
                            </a></li>
                            <li class="Order_form"><a href="#"><img src="images/user_img_08.png"/>
                                <h4>已关注钢厂：{{account.enterpriseCount}}个</h4>
                            </a></li>
                            <li class="grade"><a href="#"><img src="images/user_img_04.png"/><h4>会员等级：{{account.levelName}}</h4></a></li>

                            <li class="integral"><a href="#"><img src="images/user_img_06.png"/><h4>定额数：{{account.categoryAmount}}</h4></a></li>
                        </ul>
                    </div>
                    <div class="more-wrap" style="margin-top: 100px">
                        <a href="extraList.html" class="more">升级会员<img src="images/vip.png" alt=""/></a>
                    </div>
                </div>
                <div class="info_content" style="display:none;">
                    <div class="Notice"><span>我关注的钢厂</span></div>
                    <div class="Collections_p">
                        <div class="slideGroups">
                            <div class="parBd">
                                <div class="Collect_Products">
                                    <div class="clear">
                                        <table width="100%" border="0" cellpadding="0" class="details-table" cellspacing="0" v-cloak>
                                            <tr>
                                                <th align="center"><a href="#">序号</a></th>
                                                <th align="center"><a href="#">商家名称</a></th>
                                                <th align="center"><a href="#">地址</a></th>
                                                <th align="center"><a href="#">关注量</a></th>
                                                <th align="center"><a href="#">收藏量</a></th>
                                                <th align="center"><a href="#">招标项目个数</a></th>
                                                <th align="center"><a href="#">总货值</a></th>
                                            </tr>
                                            <tr v-for="(item, index) in following.data">
                                                <td>{{index+1}}</td>
                                                <td>{{item.name}}</td>
                                                <td>{{item.address}}</td>
                                                <td>{{item.follow}}</td>
                                                <td>{{item.collection}}</td>
                                                <td>{{item.bids}}</td>
                                                <td>{{item.gross}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info_content" style="display:none;">
                    <div class="Notice"><span>我收藏的钢厂</span></div>
                    <div class="Collections_p">
                        <div class="slideGroups">
                            <div class="parBd">
                                <div class="Collect_Products">
                                    <div class="clear">
                                        <table width="100%" border="0" cellpadding="0" class="details-table" cellspacing="0" v-cloak>
                                            <tr>
                                                <th align="center"><a href="#">序号</a></th>
                                                <th align="center"><a href="#">商家名称</a></th>
                                                <th align="center"><a href="#">地址</a></th>
                                                <th align="center"><a href="#">关注量</a></th>
                                                <th align="center"><a href="#">收藏量</a></th>
                                                <th align="center"><a href="#">招标项目个数</a></th>
                                                <th align="center"><a href="#">总货值</a></th>
                                            </tr>
                                            <tr v-for="(item, index) in collection.data">
                                                <td>{{index+1}}</td>
                                                <td>{{item.name}}</td>
                                                <td>{{item.address}}</td>
                                                <td>{{item.follow}}</td>
                                                <td>{{item.collection}}</td>
                                                <td>{{item.bids}}</td>
                                                <td>{{item.gross}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div></div>
                <div class="info_content" style="display:none;">
                    <div class="Notice"><span>我参与的竞拍活动</span></div>
                    <div class="Collections_p">
                        <div class="slideGroups">
                            <div class="parBd">
                                <div class="Collect_Products">
                                    <div class="clear">
                                        <table width="100%" border="0" cellpadding="0" class="details-table" cellspacing="0" v-cloak>
                                            <tr>
                                                <th align="center"><a href="#">序号</a></th>
                                                <th align="center"><a href="#">所在地</a></th>
                                                <th align="center"><a href="#">商家</a></th>
                                                <th align="center"><a href="#">项目名称</a></th>
                                                <th align="center"><a href="#">保证金</a></th>
                                                <th align="center"><a href="#">开始日期</a></th>
                                                <th align="center"><a href="#">拼盘数量</a></th>
                                                <th align="center"><a href="#">备注</a></th>
                                                <th align="center"><a href="#">操作</a></th>
                                            </tr>
                                            <tr v-for="(item, index) in auction.data">
                                                <td>{{index+1}}</td>
                                                <td>{{item.substanceName}}</td>
                                                <td>{{item.projectSpecification}}</td>
                                                <td>{{item.texture}}</td>
                                                <td>{{item.revaluation}}</td>
                                                <td>{{item.unit}}</td>
                                                <td>{{item.remark}}</td>
                                                <td>{{item.beginAmount}}</td>
                                                <td>xx</td>
                                                <td>{{item.stepAmount}}</td>
                                                <td>{{item.amount}}</td>
                                                <td>{{item.bidDec}}</td>
                                                <td><button :data-index="index">我要加价</button></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info_content" style="display:none;">
                    <div class="Notice"><span>浏览历史</span></div>
                    <div class="Collections_p">
                        <div class="slideGroups">
                            <div class="parBd">
                                <div class="Collect_Products">
                                    <div class="clear">
                                        <table width="100%" border="0" cellpadding="0" class="details-table" cellspacing="0"
                                               id="List1"
                                               v-cloak>
                                            <tr>
                                                <th align="center"><a href="#">序号</a></th>
                                                <th align="center"><a href="#">名称</a></th>
                                                <th align="center"><a href="#">分类</a></th>
                                                <th align="center"><a href="#">操作</a></th>
                                            </tr>
                                            <tr v-for="(item, index) in history.data">
                                                <td>1</td>
                                                <td>xx</td>
                                                <td>xx</td>
                                                <td>xx</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footerpage"></div>
</div>
</body>

<script type="text/javascript" src="js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            id: 0,
            account: {
                name: '未登录'
            },
            following: {
                data: []
            },
            collection: {
                data: []
            },
            auction: {
                data: []
            },
            history: {
                data: []
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                const self = this
                getToken(function (token) {
                    // 关注列表
                    ajax('/enterprise/following/?pageSize=50&currPage=1','GET',{},token,function (data) {
                        self.following.data = data.data
                    })

                    // 收藏列表
                    ajax('/enterprise/collect/?pageSize=50&currPage=1','GET',{},token,function (data) {
                        self.collection.data = data.data
                    })

                    // 我参与的竞拍列表
                    ajax('/auction?pageSize=50&currPage=1&action=ucenter','GET',{},token,function (data) {
                        self.auction.data = data.data
                    })

                    // 我的资料
                    ajax('/member/login','GET','',token,function (data) {
                        self.account = data.data
                    })
                })
            },
            logout() {
                localStorage.clear()
                window.location.href = 'login.html'
            }
        }
    })
</script>

<script>
    $(function () {
        $(".sideMen li").each(function (i) {
            $(this).click(function () {
                $(this).addClass("cur").siblings().removeClass("cur");
                $(".right_style .info_content").eq(i).show().siblings().hide();
            })
        })
    })

    $(function () {
        $(".headerpage").load("header.html");
        $(".footerpage").load("footer.html");
    });
</script>
</html>
